<script setup lang="ts">
import { reactive, ref } from "vue";
import Search from "@iconify-icons/ep/search";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
defineOptions({
  name: "applicationdesign"
});
const test = reactive({
  pageNumber: 1,
  pageSize: 10,
  totalCount: 0,
  clallId: 0,
  searchText: ""
});
const circleUrl = ref();
const options = [
  {
    value: "Option1",
    label: "Option1"
  },
  {
    value: "Option5",
    label: "Option5"
  }
];
const value = ref("");
</script>

<template>
  <div>
    <div>
      <el-button type="primary">添加应用</el-button>
      <el-select
        v-model="value"
        class="m-2"
        placeholder="一级分类"
        size="large"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="value"
        class="m-2"
        placeholder="二级分类"
        size="large"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="test.searchText"
        placeholder="请输入关键字"
        clearable
        class="!w-[200px]"
      />
      <el-button type="primary" :icon="useRenderIcon(Search)"> 搜索 </el-button>
    </div>
    <div>
      <el-row>
        <el-col
          v-for="(o, index) in 12"
          :key="o + '1'"
          :span="5"
          :offset="index > 0 ? 1 : 0"
          style="margin-bottom: 10px; margin-left: 30px"
        >
          <el-card :body-style="{ padding: '10px 20px' }">
            <div class="card-title">
              <el-avatar class="avatar-show" :size="50" :src="circleUrl" />
              <span class="span-show">SSS证书</span>
            </div>
            <div class="edu-route-card-subtitle">
              ssh证书哟叫做服务器上的飞机卡的风景的房间啊
              啊圣诞快乐发发撒旦克里夫骄傲的
            </div>
            <div class="edu-route-card-detail">
              <span> 6大学习阶段 | 26门课程 </span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.card-title {
  display: flex;
  align-items: center;
  margin-bottom: 9px;
}

.avatar-show {
  margin-right: 25px;
}

.span-show {
  font-size: 18px;
}

.edu-route-card-subtitle {
  display: -webkit-box;
  // height: 48px;
  overflow: hidden;
  font-size: 14px;
  line-height: 24px;
  color: #373d41;
  text-align: justify;
  text-overflow: ellipsis;
}

.edu-route-card-detail {
  margin-top: 27px;
  font-size: 12px;
  line-height: 18px;
  color: #9b9ea0;
  letter-spacing: 0.31px;
}

.app-components {
  margin-left: 1px;
}
</style>
